<template>
  <div class="stuExamWrongBody" v-loading="loading">
    <div class="body">
      <div class="topTitle">
        <el-page-header :content="examInfo.title" @back="goBack" />
      </div>
      <div class="questionBox">
        <div
          class="li"
          v-for="(item, index) in examInfo.questions"
          :id="'id' + index"
          :key="item.id"
        >
          <div class="questionType">
            <div class="type">
              <div class="num">{{ index + 1 }}</div>
              <div class="typeTitle">{{ item.type }}</div>
            </div>
            <span class="score">分值：{{ item.scores }}</span>
            <!-- 得分'getScore'   非0 'getScore have' -->
            <div
              :class="item.studentscores > 0 ? 'getScore have' : 'getScore '"
            >
              得分：{{ item.studentscores }}
            </div>
          </div>
          <span
            class="title"
            v-if="item.type !== '填空题'"
            v-html="item.title"
          ></span>
          <span
            class="title"
            v-if="item.type === '填空题'"
            style="display: flex; flex-wrap: wrap"
            v-html="rep(item.title, index)"
          ></span>
          <!-- 单选多选 -->
          <div
            class="optionsList"
            v-show="
              item.type === '单选题' ||
              item.type === '多选题' ||
              item.type === '判断题'
            "
          >
            <!-- 回答正确  correct  optionsLi
                     回答错误  wrong  optionsLi     默认optionsLi -->
            <!-- 单选 -->
            <div
              v-show="item.type === '单选题'"
              :class="
                item.answer === itemOpt.answerno
                  ? item.studentanswer === itemOpt.answerno
                    ? 'optionsLi correct'
                    : 'optionsLi'
                  : item.studentanswer === itemOpt.answerno
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-for="itemOpt in item.answers"
              :key="itemOpt.id"
            >
              <div class="left">
                <div class="opt">{{ itemOpt.answerno }}</div>
                <span>{{ itemOpt.content }}</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
            <!-- 多选 -->
            <div
              :class="
                item.answer.includes(itemOpt.answerno)
                  ? item.studentanswer.includes(itemOpt.answerno)
                    ? 'optionsLi correct'
                    : 'optionsLi'
                  : item.studentanswer.includes(itemOpt.answerno)
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-show="item.type === '多选题'"
              v-for="itemOpt in item.answers"
              :key="itemOpt.id"
            >
              <div class="left">
                <div class="opt">{{ itemOpt.answerno }}</div>
                <span>{{ itemOpt.content }}</span>
              </div>
              <div
                class="right"
                v-show="
                  item.studentanswer.includes(itemOpt.answerno) &&
                  item.answer.includes(itemOpt.answerno)
                "
              >
                回答正确
              </div>
              <div
                class="right"
                v-show="
                  !(
                    item.studentanswer.includes(itemOpt.answerno) &&
                    item.answer.includes(itemOpt.answerno)
                  )
                "
              >
                回答错误
              </div>
            </div>
            <!-- 判断题 -->
            <div
              :class="
                item.studentanswer
                  ? item.answer === '正确'
                    ? item.studentanswer === '错误'
                      ? 'optionsLi'
                      : 'optionsLi correct'
                    : item.studentanswer === '正确'
                    ? 'optionsLi wrong'
                    : 'optionsLi'
                  : 'optionsLi'
              "
              v-show="item.type === '判断题'"
            >
              <div class="left">
                <div class="opt"></div>
                <span>正确</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
            <div
              :class="
                item.answer === '错误'
                  ? item.studentanswer === '正确'
                    ? 'optionsLi'
                    : 'optionsLi correct'
                  : item.studentanswer === '错误'
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-show="item.type === '判断题'"
            >
              <div class="left">
                <div class="opt"></div>
                <span>错误</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
          </div>
          <!-- 正确答案： -->
          <div
            class="answer"
            v-show="
              item.type === '单选题' ||
              item.type === '多选题' ||
              item.type === '判断题'
            "
          >
            <span>正确答案：</span>
            <div v-show="item.type === '单选题'">{{ item.answer }}</div>
            <span
              style="margin-left: 10px; color: #666"
              v-show="item.type === '判断题'"
              >{{ item.answer }}</span
            >
            <div
              v-show="item.type === '多选题'"
              v-for="itemAnswer in item.answer"
              :key="itemAnswer.id"
            >
              {{ itemAnswer }}
            </div>
          </div>
          <!-- 问答题 -->
          <div
            class="saq"
            v-show="item.type === '填空题' || item.type === '问答题'"
          >
            <div class="ans">答:</div>
            <div class="answer">{{ item.studentanswer }}</div>
            <!-- 填空题存在 -->
            <div class="answer correct" v-show="item.type === '填空题'">
              正确答案 {{ item.answer }}
            </div>
            <div class="parse">
              <span>答案解析</span>
              <div>{{ item.explains }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="answerSheet">
      <div class="sheet">答题卡</div>
      <div class="is">
        <div class="box"></div>
        <span>正确</span>
        <div class="boxWrong"></div>
        <span>错误</span>
      </div>
      <div class="answerBox">
        <!-- 错 wrong box   对 box -->
        <div
          @click="ondhl(index)"
          :class="item.studentscores > 0 ? 'box' : 'box wrong'"
          v-for="(item, index) in examInfo.questions"
          :key="item.id"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getForResult } from "../../apis/stutest/stutest";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const data: any = reactive({
  testid: 0,
  examInfo: {},
  loading: false,
});
const { testid, examInfo, loading } = toRefs(data);
// 接受上个页面传过来的id
data.testid = Number(route.query.testid);
// 请求学生考试结果数据
const forResult = async () => {
  data.loading = true;
  const res: any = await getForResult(testid.value);
  if (res.errCode === 10000) {
    data.examInfo = res.data;
    // 处理多选题答案
    data.examInfo.questions = data.examInfo.questions.map((item: any) => {
      if (item.type === "多选题") {
        return {
          ...item,
          studentanswer: item.studentanswer.substr(1).split("|"),
          answer: item.answer.split("|"),
        };
      } else {
        return { ...item };
      }
    });
    data.loading = false;
    // 获取填空题空位的dom
    nextTick(() => {
      const boxDom: any = document.querySelectorAll(".boxs");
      boxDom.forEach((item: any) => {
        var _index = item.getAttribute("data-index");
        document
          .querySelectorAll(".boxs" + _index)
          .forEach((ite: any, index: number) => {
            ite.innerHTML =
              data.examInfo.questions[_index].studentanswer.split("|")[index];
          });
      });
    });
  } else {
    ElMessage.error(res.errMsg);
    data.loading = false;
  }
};
// 瞄点
const ondhl = (index: number) => {
  let gd: any = document.getElementById("id" + index);
  window.scrollTo({ top: gd.offsetTop - 100, behavior: "smooth" });
};
// 调用考试结果数据
forResult();
// 替换方法
const rep = (str: string, index: number) => {
  return str.replace(
    /\[\]/g,
    `<div style="min-width:50px;height:18px;border-bottom: 1px solid #999;padding:0 10px;margin:0 1px" data-index=${index} class="boxs boxs${index}"></div>`
  );
};

// 点击返回
const goBack = () => {
  router.go(-1);
};
</script>

<style lang="less" scoped>
@import url("../../static/css/stutest/stuexamwrong.css");
</style>
